<template>
  <div class="page-container page-container-detail-page">
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>通用促销</el-breadcrumb-item>
        <el-breadcrumb-item>满量促销详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--审核弹框-->
    <el-dialog
      title="审核"
      class="el-dialog-style"
      :visible.sync="dialogVisibleAdmin"
      :close-on-click-modal="false"
    >
      <el-form :model="adminDataForm" ref="adminDataForm" :rules="adminDataFormRules" label-width="100%" :size="size" label-position="right" inline>
        <el-form-item class="textarea" prop="auditRemark">
          <el-input
            type="textarea"
            placeholder="请输入审核意见"
            v-model="adminDataForm.auditRemark"
            :rows="4"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="submitFormAdminNotPass" class="cancelButton">不通过</el-button>
        <el-button :size="size"  @click.native="submitFormAdmin" class="searchButton">通过</el-button>
      </div>
    </el-dialog>

    <!-- 互斥活动详情 -->
    <el-dialog :visible.sync="mutexPromotionVisible" title="互斥活动详情" width="70%" :close-on-click-modal="false">
      <div>
        <el-table :data="mutexPromotionList" ref="multipleTable" :row-class-name="tableRowClassName" border :size="size">
          <el-table-column prop="promotionCode" width="280" label="互斥活动编码" sortable align="center"></el-table-column>
          <el-table-column prop="promName"  width="150" label="互斥活动名称" align="center">
            <template slot-scope="scope">
              <el-button @click="linkInfoByMutexProduct(scope.row.promotionId,scope.row.promType)" type="text" class="textButton" size="small">{{scope.row.promName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="goodsCategory"  width="350" label="互斥活动时间" align="center">
            <template slot-scope="scope">
                <span>{{scope.row.startTime}} - {{scope.row.endTime}}</span>
              </template>
          </el-table-column>
          <el-table-column prop="storeName" label="活动状态" align="center">
            <template slot-scope="scope">
              <span class="color333 font18" v-if="scope.row.status == 0">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 1">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 2">待审核</span>
              <span class="color333 font18" v-else-if="scope.row.status == 3">未开始</span>
              <span class="color333 font18" v-else-if="scope.row.status == 4">审核不通过</span>
              <span class="color333 font18" v-else-if="scope.row.status == 5">进行中</span>
              <span class="color333 font18" v-else-if="scope.row.status == 6">已过期</span>
              <span class="color333 font18" v-else-if="scope.row.status == 7">已关闭</span>
              <span class="color333 font18" v-else-if="scope.row.status == 8">已结束</span>
              <span class="color333 font18" v-else-if="scope.row.status == 9">活动草稿</span>
            </template>
          </el-table-column>
          <el-table-column prop="creatorName" label="创建人" align="center"></el-table-column>
          <el-table-column prop="deptName"  label="创建组织" align="center"></el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar t_r">
          <el-pagination
            @size-change="mutexPromotionListSizeChange"
            @current-change="mutexPromotionListCurrentChange"
            :current-page="mutexPromotionForm.start"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="mutexPromotionForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="mutexPromotionListTotal"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_c">
        <el-button class="searchButton" :size="size" @click.native="mutexPromotionVisible = false" >关闭</el-button>
      </div>
    </el-dialog>

    <!--保存模板弹窗-->
    <el-dialog
      title="添加模板"
      class="el-dialog-style"
      :visible.sync="templateDialogVisible"
      :close-on-click-modal="false"
      @close="cancel()"
    >
      <el-form
        :model="templateDataForm"
        :size="size"
        ref="templateDataForm"
        :rules="templateDataFormRules"
      >
        <el-form-item label="模板名称：" label-width="130px" prop="templateName">
          <el-input placeholder="输入模板名称" v-model="templateDataForm.templateName" clearable maxlength="60"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" type="primary" plain @click="cancel()" class="cancelButton">取消</el-button>
        <el-button :size="size" type="primary" @click.native="saveTemplate" class="searchButton">确定</el-button>
      </div>
    </el-dialog>

    <!--工具栏-->
    <div class="page-container-detail">
      <p class="pageName">满量促销详情</p>
      <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
          <!-- <el-row class="search-input"> -->
          <el-form-item>
            <span class="color333 font18">活动名称：</span>
            <span class="color333 font18">{{ activityData.promName }}</span>
          </el-form-item>
          <el-form-item>
            <span class="color333 font18">活动ID：</span>
            <span class="color333 font18">{{ activityData.promotionCode }}</span>
          </el-form-item>
          <el-form-item>
            <span class="color333 font18">当前状态：</span>
            <span class="color333 font18" v-if="activityData.status == 9">草稿状态</span>
            <span class="color333 font18" v-else-if="activityData.status == 1">待提交</span>
            <span class="color333 font18" v-else-if="activityData.status == 2">待审核</span>
            <span class="color333 font18" v-else-if="activityData.status == 3">未开始</span>
            <span class="color333 font18" v-else-if="activityData.status == 4">审核不通过</span>
            <span class="color333 font18" v-else-if="activityData.status == 5">进行中</span>
            <span class="color333 font18" v-else-if="activityData.status == 6">已过期</span>
            <span class="color333 font18" v-else-if="activityData.status == 7">已关闭</span>
            <span class="color333 font18" v-else-if="activityData.status == 8">已结束</span>
            <span class="color333 font18" v-else>未知状态</span>
          </el-form-item>
          <!-- </el-row> -->
        </el-form>
        <el-form
          :inline="true"
          :model="filters"
          :size="size"
          ref="filters"
          v-if="activityData.editFlag"
        >
          <el-row class="search-button">
            <span v-if="activityData.status == 2">
              <div v-if="shenhe == 0">
                <kt-button
                  type="primary"
                  :size="size"
                  @click="shenheHuodong(1)"
                  perms="market:full:verify"
                  label="审核"
                   class="searchButton"
                />
              </div>
            </span>
            <span v-if="activityData.status == 1">
              <div v-if="shenhe == 0">
                <kt-button
                  class="searchButton"
                  :size="size"
                  @click="shenheHuodong(0)"
                  perms="market:full:submit"
                  label="提交审核"
                />
              </div>
              <div v-if="shenhe == 1">
                <kt-button
                  class="searchButton"
                  :size="size"
                  @click="shenheHuodong(1)"
                  perms="market:full:verify"
                  label="审核"
                />
              </div>
            </span>
            <span>
              <div>
                <kt-button
                   class="resetButton"
                  :showImg="true"
                  :size="size"
                  @click="saveTemplateDialog"
                  perms="market:full:addtemp"
                  label="保存模板"
                />
              </div>
            </span>
          </el-row>
        </el-form>
      </div>

      <div class="tab-container tab-container-noPadding">
        <el-tabs type="border-card">
          <el-tab-pane label="促销规则">
            <div>
              <form class="form-horizontal">
                <div class="basicInfo">基本信息：</div>
                <div class="form-group">
                  <!--活动名称-->
                  <label
                    class="font16 color333 ml32"
                    ng-show="promotionDetailContent.promotionMethod != 17"
                  >活动名称：</label>
                  <div class="color333">{{ activityData.promName }}</div>
                </div>
                <div class="form-group">
                  <!--活动时间-->
                  <label class="color333 font16 ml32">活动时间：</label>
                  <div class="color333">{{ activityData.startTime }} 至 {{ activityData.endTime }}</div>
                </div>
                <div class="form-group">
                  <!--活动时间-->
                  <label class="color333 font16 ml32">活动标签：</label>
                  <div class="color333">{{ activityData.tagName }}</div>
                </div>

                <div class="basicInfo">活动规则：</div>
                <div class="form-group ng-scope">
                  <!--活动类型(促销类型)-->
                  <label class="color333 font16 ml32">活动类型：</label>
                  <div class="color333">{{ getFrontPromType(activityData.frontPromType) }}
                    <span v-if="activityData.frontPromType == 27">
                        <span v-if="activityData.freightType == 1">
                            满{{activityData.freightValue}} 件,免运费
                        </span>
                        <span v-if="activityData.freightType == 2">
                            满{{activityData.freightValue}} 件,减{{activityData.freightReducedValue}}元运费
                        </span>
                    </span>
                  </div>
                </div>
                <div class="form-group" v-if="activityData.frontPromType != 27">
                  <label class="color333 font16">是否叠加应用：</label>
                  <div class="color333">
                    <span v-if="parseInt(activityData.overlayAppFlag) == 0">否（超量：按最高层级享受优惠）</span>
                    <span v-if="parseInt(activityData.overlayAppFlag) == 1">
                      是（倍量：每满一级优惠一次）上限{{
                      activityData.overlayAppNum
                      }}次
                    </span>
                  </div>
                </div>
                <div class="form-group" v-if="activityData.frontPromType != 27">
                  <label class="color333 font16 ml32">优惠设置：</label>
                  <div class="oh">
                    <div
                      class="color333 f_l mr10"
                      v-for="item in activityData.promotionRules"
                      :key="item.conditionValue"
                    >
                      满{{ item.conditionValue }}元
                      <span
                        v-if="activityData.frontPromType == 4"
                      >减</span>
                      <span v-if="activityData.frontPromType == 5">打</span>
                      {{ item.contentValue }}
                      <span
                        v-if="activityData.frontPromType == 4"
                      >元</span>
                      <span v-if="activityData.frontPromType == 5">折</span>
                    </div>
                  </div>
                </div>
                <div class="form-group flexBox">
                  <label class="color333 font16 ml32 titleText">活动描述：</label>
                  <div class="color333">{{ activityData.description }}</div>
                </div>
                <div class="basicInfo ng-scope">交易规则：</div>
                <div class="form-group" v-if="false">
                  <!--是否支持折上折-->
                  <label class="color333 font16">是否支持折上折：</label>
                  <div class="col-sm-10 pdt3px themeTextColor">
                    <span v-if="activityData.foldingFlag == 1" class="ng-binding ng-scope">是</span>
                    <span v-else class="ng-binding ng-scope">否</span>
                  </div>
                </div>
                <div class="form-group" v-show="false">
                  <!--是否排斥优惠券-->
                  <label class="color333 font16">是否排斥优惠券：</label>
                  <!-- <label class="color999 ng-hide">是否排斥优惠券（尾款支付）</label> -->
                  <div class="color333">否</div>
                </div>
                <div class="form-group ng-scope">
                  <!--是否包邮-->
                  <label class="color333 font16 ml32">是否包邮：</label>
                  <!-- <label class="color999 ng-hide" ng-show="promotionDetailContent.promotionType==9">包邮方式</label> -->
                  <div class="color333">
                    <span v-if="activityData.parcelsFlag == 0">否</span>
                    <span v-else>是</span>
                  </div>
                </div>
                <!-- <div
                  class="form-group ng-scope"
                  ng-if="promotionDetailContent.promotionType == 1 || promotionDetailContent.promotionType == 14"
                >
                  <label class="color333 font16 ml32">超限规则：</label>
                  <div class="color333">
                    <span v-if="activityData.foldingFlag == 1" class="ng-binding ng-scope">按原价购买</span>
                    <span v-else class="ng-binding ng-scope">不可购买</span>
                  </div>
                </div> -->
                <div class="form-group"  v-if="deptType != 3">
                  <label class="color333 font16 ml32">是否分摊：</label>
                  <div class="color333">
                    <span v-if="parseInt(activityData.costAllocationFlag) == 0">否</span>
                    <span
                      v-if="parseInt(activityData.costAllocationFlag) == 1"
                    >是</span>
                  </div>
                </div>
                <div class="form-group"  v-if="activityData.costAllocationFlag == 1 && deptType != 3">
                  <label class="color333 font16 ml32">分摊比例：</label>
                  <div class="color333">
                    <span v-if="activityData.parentAllocationScale">母平台比例：{{activityData.parentAllocationScale}}%</span>
                    <span v-if="activityData.childAllocationScale">子平台比例：{{activityData.childAllocationScale}}%</span>
                    <span v-if="activityData.merchantAllocationScale">商家比例：{{activityData.merchantAllocationScale}}%</span>
                    <span v-if="activityData.storeAllocationScale">店铺比例：{{activityData.storeAllocationScale}}%</span>
                  </div>
                </div>
                <div class="basicInfo">参与条件：</div>
                <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
                  <!--活动渠道-->
                  <div
                    class="line line-dashed b-b line-lg"
                    ng-show="promotionDetailContent.channelCodes.length > 0"
                  ></div>
                  <div class="form-group ng-scope flexBox" v-if="this.deptType == 0">
                    <label class="color333 font16 ml32 titleText">活动渠道：</label>

                    <div class="color333">
                      <span
                        v-for="item in (activityData.channelCodes + '').split(
                          ','
                        )"
                        :key="item"
                        class="ng-binding ng-scope"
                      >{{ getChannelCodes(item) }} &nbsp;</span>
                      <!-- <span ng-repeat="channel in promotionDetailContent.channelCodes" class="ng-binding ng-scope">BBC &nbsp;</span> -->
                    </div>
                  </div>

                  <div
                    class="line line-dashed b-b line-lg"
                    ng-show="canShowActivityPlatformLimitShow()"
                  ></div>

                  <div class="form-group">
                    <label class="color333 font16 ml32">新老用户：</label>
                    <div class="color333">
                      <span v-for="item in (activityData.proUserType + '').split(',')" :key="item" class="ng-binding ng-scope">
                        <span v-if="item == 1">
                          新用户 &nbsp;  
                        </span>
                        <span v-if="item == 2">
                          老用户 &nbsp;  
                        </span>
                      </span>
                    </div>
                  </div>
                  <div class="form-group " v-if="activityData.memTypes != null">
                    <label class="color333 font16 ml32">会员类型：</label>
                    <div class="color333">
                      <span v-for="item in (activityData.memTypes + '').split(',')" :key="item" class="ng-binding ng-scope">
                        <span v-if="item == 1">
                          普通会员 &nbsp;  
                        </span>
                        <span v-if="item == 2">
                          VIP会员 &nbsp;
                        </span>
                      </span>
                    </div>
                  </div>
                  <div class="oh mb20 ">
                    <span class="color333 font16 ml32 turnInlineBlock w80  mb20">会员等级：</span>
                    <div class="color333">
                      <div style="border:1px solid #ededed" class="ml33 pdl30 pdt20">
                      <div
                        v-for="item in levelList "
                        :key="item"
                        class=" mb10 lh25"
                      >
                        <div  style="display:flex">
                          <span class="turnInlineBlock w144 oe t_r " style="flex-shrink:0">{{item.childName}}</span>
                          <span class="turnInlineBlock">：</span>
                          <span class="turnInlineBlock ">
                            <span v-for="(level,index) in item.childLevelList.split('|')" :key="index"  class="turnInlineBlock width120 mr10 mb10" >
                               <img src="../../../../src/assets/checked.png" alt="" style="width:16px;height:16px" class="mr10">
                               {{level}}
                               <!-- <span class="turnInlineBlock" style="margin-left:5px; margin-right:5px">
                                 {{(item.childLevelList.split("|").length-1) > index ? '|' : ""}}
                               </span> -->
                            </span>
                           </span>
                        </div>
                      </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="color333 font16 ml32">店铺地区：</label>
                    <div class="color333">全国</div>
                  </div>
                  <div class="form-group">
                    <label class="color333 font16 ml32">用户地区：</label>
                    <div class="color333">全国</div>
                  </div>
                  <div
                    class="form-group ng-scope"
                    ng-if="promotionDetailContent.promotionType != 12"
                  >
                    <!--备注-->
                    <label class="color333 font16 ml64">备注：</label>
                    <p v-html="activityData.remark">{{ activityData.remark }}</p>
                    <!--                            <div class="col-sm-10 pdt3px themeTextColor">-->
                    <!--                                  <quill-editor-->
                    <!--                                  v-model="activityData.remark"-->
                    <!--                                  ref="myQuillEditor"-->
                    <!--                                  style="height: 300px;"-->
                    <!--                                 -->
                    <!--                                >{{activityData.remark}}</quill-editor>-->
                    <!--                            </div>-->
                  </div>
                </div>
              </form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="参与商家/店铺" @click="getMerchantOrStoreList()">
            <el-tabs type="border-card">
              <el-tab-pane label="商家">
                <el-table :data="businessList" >
                  <el-table-column prop="id" label="商家编码"></el-table-column>
                  <el-table-column prop="name" label="商家名称"></el-table-column>
                  <el-table-column prop="type" label="商家类型"></el-table-column>
                </el-table>
                <!--分页栏-->
                <div class="toolbar t_r" v-if="businessList.length > 0">
                  <el-pagination
                    @size-change="businesshandleSizeChange"
                    @current-change="businesshandleCurrentChange"
                    :current-page="businessForm.pageNo"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="businessForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="businessListTotal"
                  ></el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane label="店铺">
                <el-table :data="shopList" >
                  <el-table-column prop="id" label="店铺编码"></el-table-column>
                  <el-table-column prop="name" label="店铺名称"></el-table-column>
                  <el-table-column prop="type" label="店铺类型"></el-table-column>
                  <el-table-column prop="merchantName" label="所属商家"></el-table-column>
                </el-table>
                <!--分页栏-->
                <div class="toolbar t_r" v-if="shopList.length > 0">
                  <el-pagination
                    @size-change="shophandleSizeChange"
                    @current-change="shophandleCurrentChange"
                    :current-page="shopForm.pageNo"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="shopForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="shopListTotal"
                  ></el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="参与商品">


            <el-tabs type="border-card">
              <el-tab-pane :label="noMutexProductLabel">
                <el-table :data="merchantProductTableData"  :size="size" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                  <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                  <el-table-column prop="mpCode" label="商品编码" width="180" align="center"></el-table-column>
                  <el-table-column prop="productName" label="商品名称" width="180" sortable align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.mpName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="categoryName" label="商品分类" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.categoryName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="stock" label="库存" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.stock }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="storeName" label="所属店铺" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.storeName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="channelStoreLimit" label="店铺限购" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.channelStoreLimit != null &&  scope.row.channelStoreLimit != '' ? scope.row.channelStoreLimit : '-'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="individualLimit" label="个人限购" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.individualLimit != null &&  scope.row.individualLimit != '' ? scope.row.individualLimit : '-'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="salePrice" label="原价（元）" align="center">
                    <template slot-scope="scope">
                      <span>{{ scope.row.salePrice }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <!--分页栏-->
                <div class="toolbar t_r">
                  <el-pagination
                    @size-change="handleSizeChangeMerchantProductTableData"
                    @current-change="handleCurrentChangeMerchantProductTableData"
                    :current-page="merchantProductSearchForm.start"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="merchantProductSearchForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="merchantProductTableDataTotal"
                  ></el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane :label="mutexProductLabel">
                <div>
                  <el-table :data="mutexProductList" row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%" @selection-change="handleSelectionChange" class="tableStyle">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="mpCode" label="商品编码" width="200"  align="left"></el-table-column>
                    <el-table-column prop="mpName" label="商品名称" width="200"></el-table-column>
                    <el-table-column prop="categoryName" label="商品分类" width="200"></el-table-column>
                    <el-table-column prop="stock" label="库存" width="200"></el-table-column>
                    <el-table-column prop="salePrice" label="原价（元）" width="200"></el-table-column>
                    <el-table-column prop="storeName" label="所属店铺" width="200"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="400">
                      <template slot-scope="scope">
                    <el-button @click="getMutexInfo(scope.row)" v-if="scope.row.typeOfProduct==20" type="text" class="textButton" size="small">查看详情</el-button>
                    <!-- <el-button @click="renewAdd(scope.row)" v-if="scope.row.typeOfProduct==10 || scope.row.typeOfProduct==20" type="text" class="textButton" size="small">重新添加</el-button> -->
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="toolbar t_r" >
                    <el-pagination
                      @size-change="handleSizeChangeMutexProductList"
                      @current-change="handleCurrentChangeMutexProductList"
                      :current-page="mutexProductForm.start"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="mutexProductForm.limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="mutexProductTotal"
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import marketRequest from "@/market/request/marketRequest";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from "color-name";
import tabPane from "./components/TabPaneCreateGroupon";
import qs from "qs";
import {
  promTypeConverter,
  frontPromTypeConverter,
  channelCodeConverter,
  proPlatformConverter,
  proUserTypeConverter,
  proMemberTypeConverter,
  proMemberLevelConverter
} from "@/market/dict/marketDict";

export default {
  name: "Tab",
  components: {
    tabPane,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
      channelList: [{ childName: "卡奥斯运营中心", id: "179" }],
      merchantProductTableData: [],
      merchantProductTableDataTotal: 0,
      merchantProductSearchForm: {
        promotionId: this.promotionId,
        merchantId: null,
        mpCode: null,
        mpName: null,
        categoryName: null,
        start: 1,
        limit: 10
      },

      templateDialogVisible: false,
      templateDataForm: {
        templateName: null
      },
      templateDataFormRules: {
        templateName: [
          { required: true, message: "请输入模板名称",trigger:"blur" },
          { required: true, message: "请输入模板名称",trigger:"change" },
          { max: 60, message: "模板名称最多60字符", trigger: "blur" },
          { max: 60, message: "模板名称最多60字符", trigger: "change" }
        ]
      },
      tableDataData: [],
      adminDataForm: {
        auditRemark: ""
      },
      dialogVisibleAdmin: false,
      shenhe: 0,
      size: "small",
      filters: {},
      multipleSelection: [],
      businessList: [{ id: "001", name: "张小二服饰", type: "自营商家" }],
      businessListTotal: 0,
      businessForm: {
        promotionId: this.promotionId,
        merchantType: "1",
        pageNo: 1,
        pageSize: 10
      },
      shopList: [{ id: "161616", name: "张小二bbc店铺", type: "直营" }],
      shopForm: {
        promotionId: this.promotionId,
        merchantType: "2",
        pageNo: 1,
        pageSize: 10
      },
      shopListTotal: 0,
      promotionId: this.$route.query.id,
      activityData: {},

      noMutexProductLabel:"生效商品（0）",
      mutexProductForm:{
        promotionId: this.$route.query.id,
        mutexFlag:1,//互斥标识
        start: 1,
        limit: 10
      },
      mutexProductList:[],
      mutexProductTotal:0,
      mutexProductLabel:"互斥商品（0）",
      mutexPromotionForm:{
        promotionId: this.$route.query.id,
        start:1,
        limit:10,
      },
      mutexPromotionList:[],
      mutexPromotionListTotal:0,
      mutexPromotionVisible:false,

      levelList: [],

      adminDataFormRules: {
        auditRemark: [
          { required: true, message: "审核意见不能为空", trigger: "blur" }
        ]
      },
    };
  },
  created: function() {
    // if(localStorage.getItem("deptType") != 0){
      this.getPromotionInfo();
    // }

    this.mainMerchantFormFind();
    this.mainStoreTableDataFormFind();
    this.getProductList();
    this.getChildList();
    this.getMutexProductList();
  },
  methods: {
    getPromotionInfo(){
      let _this = this;
      let callback = res => {

        if (res.code == "0000") {
          _this.activityData = res.data;
          //根据渠道code获取
          if(res.data.channelCodes != null){
            // if(res.data.channelCodes.split(",").indexOf("179") == -1){
            //     res.data.channelCodes = "179," + res.data.channelCodes;
            // }
            _this.getLevelList(res.data.channelCodes);
          }

        } else {
          //alert("获取促销详情失败");
        }
      };
      this.promotionId = this.$route.query.id;
      let params = { id: this.$route.query.id };
      this.utils.request.promotionDetailById(params, callback);
    },
    getLevelList(channelCodes){
      if(this.deptType == 0){
        // //母平台
        // channelCodes.split(",").forEach(item=>{
        //   let name = this.getChannelCodes(item);
        //   //获取等级
        //   this.activityData.promotionMemberGradeList.forEach(levelList=>{
        //     if(levelList.platformId == item){
        //         if(levelList.levelCodeList == null || levelList.levelCodeList.length < 1){
        //           this.levelList.push({"childName":name,"childLevelList":"全部"})
        //         }else{
        //           this.utils.request.queryMemLevelListByIds({ids:levelList.levelCodeList},res=>{
        //               let levelRstList = []
        //               res.data.forEach(level=>{
        //                 levelRstList.push(level.levelName.length >= 6 ? level.levelName.slice(0,5)+"..." : level.levelName);
        //               })
        //               if(item == '179'){
        //                 this.levelList.unshift({"childName":name,"childLevelList":levelRstList.join(" |  ")})
        //               }else{
        //                 this.levelList.push({"childName":name,"childLevelList":levelRstList.join("  |  ")})
        //               }
        //           })
        //         }
        //     }
        //   })
        // })
      }else{
        let user = localStorage.getItem("user");
        let userInfo = JSON.parse(user);
        if (this.activityData.promotionMemberGradeList == null || this.activityData.promotionMemberGradeList.length < 1 || this.activityData.promotionMemberGradeList[0].levelCodeList == null){
          this.levelList.push({"childName":userInfo.deptName,"childLevelList":"全部"})
        }else {
          this.utils.request.queryMemLevelListByIds({ids:this.activityData.promotionMemberGradeList[0].levelCodeList},res=>{
            let levelRstList = []
            res.data.forEach(level=>{
              levelRstList.push(level.levelName.length >= 6 ? level.levelName.slice(0,5)+"..." : level.levelName);
            })
            this.levelList.push({"childName":userInfo.deptName,"childLevelList":levelRstList.join("|")})
          })
        }
      }
    },

    saveTemplateDialog(){
      if (this.$refs['templateDataForm'] != undefined) {
        this.$refs['templateDataForm'].resetFields();
      }
      this.templateDialogVisible = true;
    },
    // getChildList() {
    //   this.utils.request.queryChildList({}, res => {
    //     if (res.code == "0000" && res.data && res.data.length > 0) {
    //       res.data.forEach(v => {
    //         this.channelList.push(v);
    //       });
    //       this.$nextTick(()=>{
    //         this.getPromotionInfo();
    //       })
    //     }
    //   });
    // },

    handleCurrentChangeMerchantProductTableData(pageNum) {
      this.merchantProductSearchForm.start = pageNum;
      this.getProductList();
    },
    handleSizeChangeMerchantProductTableData(val) {
      this.merchantProductSearchForm.limit = val;
      this.merchantProductSearchForm.start = 1;
      this.getProductList();
    },
    getProductList() {
      let this_ = this;
      let callback = function(res) {
        if (res.code == "0000") {
          this_.merchantProductTableData = res.data.rows;
          this_.merchantProductTableDataTotal = res.data.total;
          if(res.data.totalCount>9999){
            this_.noMutexProductLabel = "生效商品（9999+）";
          }else{
            this_.noMutexProductLabel = "生效商品（"+res.data.totalCount+"）";
          }
        } else {
          this_.noMutexProductLabel = "生效商品（0）";
        }
      };
      this.merchantProductSearchForm.promotionId = this.promotionId;
      marketRequest.getProductListV3(this.merchantProductSearchForm, callback);
    },

    // 换页刷新
    shophandleSizeChange: function(pageSize) {
      this.shopForm.pageSize = pageSize;
      this.shopForm.pageNo = 1;
      this.mainStoreTableDataFormFind();
    },
    shophandleCurrentChange(pageNum) {
      this.shopForm.pageNo = pageNum;
      this.mainStoreTableDataFormFind();
    },
    // 换页刷新
    businesshandleSizeChange: function(pageSize) {
      this.businessForm.pageSize = pageSize;
      this.businessForm.pageNo = 1;
      this.mainMerchantFormFind();
    },
    businesshandleCurrentChange(pageNum) {
      this.businessForm.pageSize = pageSize;
      this.mainMerchantFormFind();
    },
    saveTemplate() {
      let this_ = this;
      this.$refs["templateDataForm"].validate(valid => {
        if (valid) {
          let callback = res => {
            if (res.code == "0000") {
              this_.$message({message:"保存成功",type:"success"})
              this_.templateDialogVisible = false;
            } else {
              this_.$message({ message: "模板名称重复", type: "error" });
            }
          };
          this_.templateDataForm.id = this_.activityData.id;
          marketRequest.promotionSaveTemplate(this_.templateDataForm, callback);
        }
      });
    },
    submitFormAdminNotPass() {
      this.$refs.adminDataForm.validate(auditRemarkE => {
        if(auditRemarkE){
          let this_ = this;
          this.dialogVisibleAdmin = false;

          let callback = res => {
            this_.activityData.status = 4;

          };
          this.adminDataForm.id = this.promotionId;
          this.adminDataForm.status = 4;
          this.utils.request.promotionUpdate(this.adminDataForm, callback);
          this.shenhe = 0;
        }
      })
    },
    submitFormAdmin() {
      let this_ = this;
      this.dialogVisibleAdmin = false;

      let callback = res => {
        this_.activityData.status = 3;

      };
      this.adminDataForm.id = this.promotionId;
      this.adminDataForm.status = 11;
      this.utils.request.promotionUpdate(this.adminDataForm, callback);
    },

    shenheHuodong(flag) {
      let this_ = this;
      if (flag == 0) {
        this.$confirm("确认提交审核？", "提示", {
          type: "warning",
          closeOnClickModal: false,
        })
          .then(() => {
            this.shenhe = 1;
            let callback = res => {
              if (res.code == "0000") {
                this_.activityData.status = 2;
                this_.shenhe = 0;
              } else if (res.code == "0001") {
                that.$message({ message: res.msg, type: "error" });
              }
            };
            let param = {};
            param.id = this.promotionId;
            param.status = 2;
            this.utils.request.reviewPromotion(param, callback);
          })
          .catch(() => {});
      } else {
        this.shenhe = 2;
        this.dialogVisibleAdmin = true;
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    revokeProduct() {
      let this_ = this;
      let callback = function(res) {
        if (res.code == "0000") {
          this_.getMerchantProductList();
        } else {
          //alert("修改失败");
        }
      };
      if (this.multipleSelection.length > 0) {
        let ids = this.multipleSelection.map(item => item.id);
        this.utils.request.promotionRevokeProduct({ mpIds: ids }, callback);
      } else {
        this.$message({
          message: "操作失败, 请选择要撤出的商品",
          type: "error"
        });
      }
    },
    createPage() {
      this.$router.push("/CreatePromotion");
    },
    getProPlatform(code) {
      return proPlatformConverter(code);
    },
    getProUserType(code) {
      return proUserTypeConverter(code);
    },
    getChannelCodes(code) {
      let item = this.channelList.find(function(item, index) {
        return item.id == code;
      });
      return typeof item == "undefined" ? "" : item.childName;
    },
    getFrontPromType(code) {
      return frontPromTypeConverter(code);
    },
    getProMemberType(code) {
      return proMemberTypeConverter(code);
    },
    getProMemberLevel(code) {
      return proMemberLevelConverter(code);
    },
    getMerchantOrStoreList() {
      alert("aaa");
    },
    //查询绑定关系的商家
    mainMerchantFormFind() {
      var this_ = this;
      //let params = { promotionId: this.promotionId, merchantType: "1" };
      this.businessForm.promotionId = this.promotionId;
      this.utils.request.promotionMerchantList(this.businessForm, function(
        res
      ) {
        if (res.code == "0000") {
          this_.businessList = res.data.list.map((ele, index) => {
            let merchant = {};
            merchant.id = ele.orgNumber;
            merchant.name = ele.merchantName;
            merchant.type = ele.merchantTypeManager == "1" ? "自营商家" : "第三方商户";
            return merchant;
          });
          this_.businessListTotal = res.data.totalCount;
        }
      });
    },
    //查询绑定关系的店铺
    mainStoreTableDataFormFind() {
      //let params = { promotionId: this.promotionId, merchantType: "2" };
      var this_ = this;
      this.shopForm.promotionId = this.promotionId;
      this.utils.request.promotionMerchantList(this.shopForm, function(res) {
        if (res.code == "0000") {
          this_.shopList = res.data.list.map((ele, index) => {
            let store = {};
            store.id = ele.storecode;
            store.name = ele.storename;
            store.type = ele.storeType == "1" ? "线上店铺" : "线下店铺";
            store.merchantName = ele.merchantName;
            return store;
          });
          this_.shopListTotal = res.data.totalCount;
        }
      });
    },
    getMerchantProductList() {
      let callback2 = res => {
        if (res.code == "0000") {
          this.tableDataData = res.data.rows;
        }
      };
      var param2 = {};
      param2.promotionId = this.$route.query.id;
      param2.start = 1;
      param2.limit = 10;
      this.utils.request.promotionMerchantProductList(param2, callback2);
    },


    /**
     * 查询互斥商品
     */
    getMutexProductList() {
      var this_ = this;
      marketRequest.getProductListV3(this.mutexProductForm, res => {
        if (res.code == "0000") {
          this_.mutexProductList = res.data.rows;
          this_.mutexProductTotal = res.data.total;
          if(this_.mutexProductTotal>9999){
            this_.mutexProductLabel = "互斥商品（9999+）";
          }else{
            this_.mutexProductLabel = "互斥商品（"+res.data.totalCount+"）";
          }
        }
      });
    },
    /**
     * 每页条数改变触发
     */
    handleSizeChangeMutexProductList(val){
      this.mutexProductForm.limit = val;
      this.mutexProductForm.start = 1;
      this.getMutexProductList();
    },
    /**
     * 换页刷新
     */
    handleCurrentChangeMutexProductList(val){
      this.merchantProductSearchForm.start = val;
      this.getMutexProductList();
    },
    /**
     * 互斥商品查看详情
     */
    getMutexInfo(row){
      let that = this;
      this.mutexPromotionForm.promotionMerchantProductId = row.id;
      this.mutexPromotionForm.start = 1;
      this.mutexPromotionForm.limit = 10;
      this.getPromotionMutexListByProductId();
    },
    getPromotionMutexListByProductId(){
      let that = this;
      this.utils.request.getPromotionMutexListByProductId(this.mutexPromotionForm,res=>{
        if(res.code=='0000'){
            that.mutexPromotionList = res.data.rows;
            that.mutexPromotionListTotal = res.data.total;
            that.mutexPromotionVisible = true;
        }
      });
    },

    //table的双色条纹
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    /**
     * 每页条数改变触发
     */
    mutexPromotionListSizeChange(val){

      this.mutexPromotionForm.limit = val;
      this.mutexPromotionForm.start = 1;
      this.getPromotionMutexListByProductId();
    },
    /**
     * 换页刷新
     */
    mutexPromotionListCurrentChange(val){

      this.mutexPromotionForm.start = val;
      this.getPromotionMutexListByProductId();
    },

    /**
     * 互斥商品重新添加
     */
    renewAdd(row){

      let that = this;
      let param = {};
      var productIdList = [];
      param.promotionId = row.promotionId;
      param.promotionType = 1;
      if(row.typeOfProduct == '10'){
          //spu
          row.children.forEach(item=>{
            productIdList.push(item.id);
          })
      }else if(row.typeOfProduct == '20'){
        productIdList.push(row.id);
      }
      param.productIdList = productIdList;
      this.utils.request.renewAddMutexProduct(param,res=>{
        if(res.code=='0000'){
          that.getMutexProductList();
          that.getMerchantProductList();
          let data = res.data;
          if(data.businessCode == '0001'){
              that.$message({message: data.businessMsg, type: "success"});
          }else if(data.businessCode == '0002'){
              that.$message({message:data.businessMsg, type: "error"})
          }else if(data.businessCode == '0003'){
              that.$alert(data.businessMsg, '提示', {
              confirmButtonText: '知道了',
              callback: action => {}
              });
          }
        }
      });
    },
    /**
     * 点击活动名称跳转详情
     */
    linkInfoByMutexProduct(promotionId,type){
      if(type == 1){
        this.$router.push({ path: "/SinglePromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/SinglePromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 2){
        this.$router.push(`/FullNumPromotionDetailNew?id=${promotionId}&auth=0`);
      }else if(type == 3){
        this.$router.push({ path: "/FullPromotionDetailNew/" + promotionId + "/0"});
        //this.$router.push(`/FullPromotionDetailNew?id=${promotionId}&auth=0`);
      }else if(type == 4){
        this.$router.push(`/SeckillDetail?promotionId=${promotionId}`);
      }else if(type == 5){
        this.$router.push({ path: "/GiftPromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/GiftPromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 6){
        this.$router.push({ path: "/ComplexPromotionInfo/" + promotionId});
      }else if(type == 7){
        this.$router.push({ path: "/XofferPromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/XofferPromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 8){
        this.$router.push({ path: "/IncreasePromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/IncreasePromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 9){
        this.$router.push(`/QueryPresellPromotion?value=${promotionId}&auth=0`);
      }else if(type == 10){
        this.$router.push("/GroupDetailPromotion?id=" + `${promotionId}`);
      }else if(type == 12){
        this.$router.push(`/QueryPromotion?value=${promotionId}&auth=0`);
      }
    },
    //保存模板弹框取消
    cancel(){
      this.templateDialogVisible=false;
      this.$refs.templateDataForm.resetFields();//关闭弹框清空表单值与校验
    }
  },
  mounted() {
    //
    //
    // var queryparam={};
    // queryparam.id = this.$route.query.id;
    // var this_ = this;
    // this.$axios.post("jic-market/patch-groupon-theme/detail",qs.stringify(queryparam)).then(res => {
    //
    //   if(res.data.code =="0000") {
    //     this_.activityData = res.data.data.rows;
    //   }
    // });
    //

    let callback2 = res => {
      if (res.code == "0000") {
        this.tableDataData = res.data.rows;
      }
    };
    var param2 = {};
    param2.promotionId = this.$route.query.id;
    param2.start = 1;
    param2.limit = 10;
    //this.utils.request.promotionMerchantProductList(param2, callback2);
  }
};
</script>

<style scoped lang="scss">
@import '../../../assets/css/public.scss';
.ml32{
  margin-left: 32px !important;
}
.ml64{
  margin-left: 64px !important;
}
.w80{
  width:80px
}
.pdl30{
  padding-left: 30px;
}
.lh25{
  line-height: 25px;
}
.pdl60{
  padding-left: 60px;
}
.w144{
  width: 144px;
}
.oe{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.width120{
  width: 150px;
}
.mr10{
  margin-right: 10px;
}
.mb10{
  margin-bottom: 10px;
}
.ml33{
  margin-left: 33px;
}
.pdl30{
  padding-left: 30px;
}
.pdt20{
  padding-top: 20px;
}
</style>
